<template>
	<view style="padding-bottom: 30rpx;">
		<view class="wrap">
			<text>个人中心</text>
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
		<view
			style=" height: 200rpx; padding: 30rpx;background: linear-gradient(90deg, rgba(255,101,61,1) 0%, rgba(255,130,0,1) 100%); position: relative;">
			<view style="display: flex; align-items: center; ">
				<image style="width: 132rpx; height: 120rpx; border-radius: 10rpx; margin-right: 10rpx; "
					src='../../static/my/logo.jpg' mode=""></image>
				<view style="width: 100%; ">
					<view class="fr-b-c " style="width: 100%;">
						<view class="s1">我的名字</view>
						<view class="w1">
							<image style="width: 32rpx;height: 32rpx;" src='../../static/my/xin.jpg' mode=""></image>
							<view class="s2">普通用户</view>
						</view>
						<view class="w1">
							<image style="width: 32rpx;height: 32rpx;" src='../../static/my/xin1.jpg' mode=""></image>
							<view class="s2">辅导老师</view>
						</view>
						<view class="w1">
							<image style="width: 32rpx;height: 32rpx;" src='../../static/my/vip.jpg' mode=""></image>
							<view class="s2">中级会员</view>
						</view>

						<view class="" @click="news">
							<image style="width: 40rpx;height: 40rpx;" src="../../static/my/xinnxi.jpg" mode=""></image>
						</view>
					</view>
					<view style="margin-top: 20rpx;" class="fr-b-c">
						<view style="display: flex;">
							<view class="s1 m-r-10">
								id:30
							</view>
							<view class="s1">
								手机号;15555555555
							</view>
						</view>
						<view class="" @click="means">
							<image style="width: 40rpx;height: 40rpx;" src="../../static/my/she.jpg" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="box fr-b-c">
				<view style="display: flex;align-items: center;" @click="jumpTo('/my-bus/feedback/feedback')">
					<image style="width: 32rpx;height: 32rpx;" src="../../static/my/jian.jpg" mode=""></image>
					<view class="m-l-10">
						建议留言
					</view>
				</view>
				<view style="display: flex;align-items: center;" @click="jumpTo('/my-bus/liveFollow/liveFollow')">
					<image style="width: 32rpx;height: 32rpx;" src="../../static/my/jian2.jpg" mode=""></image>
					<view class="m-l-10">
						直播关注
					</view>
				</view>
				<view style="display: flex;align-items: center;" @click="jumpTo('/my-bus/history/history')">
					<image style="width: 32rpx;height: 32rpx;" src="../../static/my/jian3.jpg" mode=""></image>
					<view class="m-l-10">
						浏览历史
					</view>
				</view>
			</view>
		</view>
		<!-- background-color: #f9f9f9; -->
		<view style="padding: 30rpx; margin-top: 60rpx;">
			<view
				style="background-color: #fff;padding: 20rpx;border-radius: 20rpx;box-shadow: 0rpx 0rpx 8rpx 8rpx #eee;">
				<view class="fr-b-c">
					<view class="">
						我的订单
					</view>
					<view class="fr-b-c" style="justify-content: center;">
						<view class="">
							查看全部订单
						</view>
						<u-icon name="arrow-right" size="28" color="#999"></u-icon>
					</view>
				</view>
				<view style="width: 100%; height: 1rpx;margin-top: 30rpx;background-color: rgba(216, 216, 216, 1);;">

				</view>
				<view class="fr-b-c m-t-20" style="padding: 20rpx;">
					<view class="fr-c-d ">
						<image style="width: 70rpx;height: 70rpx;" src="../../static/my/my-2.jpg" mode=""></image>
						<view class="s3 ">
							代付款
						</view>
					</view>
					<view class="fr-c-d ">
						<image style="width: 70rpx;height: 70rpx;" src="../../static/my/my-1.jpg" mode=""></image>
						<view class="s3 ">
							待发货
						</view>
					</view>
					<view class="fr-c-d ">
						<image style="width: 70rpx;height: 70rpx;" src="../../static/my/my-3.jpg" mode=""></image>
						<view class="s3 ">
							待收货
						</view>
					</view>
					<view class="fr-c-d ">
						<image style="width: 70rpx;height: 70rpx;" src="../../static/my/my-4.jpg" mode=""></image>
						<view class="s3 ">
							我的售后
						</view>
					</view>
				</view>
			</view>
			<view class="m-t-30 box2 fr-b-c" style="padding: 20rpx;">
				<view class="fr-c ">
					<view style="font-size: 40rpx;font-weight: 400;color: rgba(255, 255, 255, 1);">
						线下商学院
					</view>
					<view
						style="width: 4rpx;height: 52rpx;opacity: 0.46;background: rgba(255, 255, 255, 1); margin-left: 20rpx;margin-right: 20rpx;">
					</view>
					<view style="font-size: 20rpx;font-weight: 500;color: rgba(255, 255, 255, 1);">
						于2020-03-04 郑州开启
					</view>
				</view>
				<view class="s4">
					立即报名
				</view>
			</view>

			<view class="m-t-20  fr-b-c">
				<view class="b1 fr-b-c">
					<view style="padding: 20rpx 0; margin-left: 20rpx;">
						<view style="font-size: 36rpx;font-weight: 700;color: rgba(255, 255, 255, 1);">
							邀请好友
						</view>
						<view class="m-t-20" style="font-size: 20rpx;font-weight: 400;color: rgba(255, 255, 255, 1);">
							邀请好友有好礼
						</view>

						<view class="s4 m-t-20">
							立即邀请
						</view>
					</view>
					<view class="">
						<image style="width: 140rpx;height: 148rpx;"
							src="../../static/my/9dbf882e497b8091eddca7b628c9186.jpg" mode=""></image>
					</view>
				</view>
				<view class="b2 fr-b-c" @click="xianmu">
					<view style="padding: 20rpx 0; margin-left: 20rpx;">
						<view style="font-size: 36rpx;font-weight: 700;color: rgba(255, 255, 255, 1);">
							我的项目
						</view>
						<view class="m-t-20" style="font-size: 20rpx;font-weight: 400;color: rgba(255, 255, 255, 1);">
							所有项目都在这
						</view>

						<view class="s4 m-t-20">
							查看项目
						</view>
					</view>
					<view class="">
						<image style="width: 140rpx;height: 148rpx;"
							src="../../static/my/9dbf882e497b8091eddca7b628c918.jpg" mode=""></image>
					</view>
				</view>
			</view>
			<view class="m-b-40 m-t-20"
				style="padding: 24rpx 44rpx 24rpx 44rpx; background-color: #fff;border-radius: 20rpx;box-shadow: 0rpx 0rpx 8rpx 8rpx #eee;">
				<view class="fr-b-c m-b-30" v-for="(item,index) in nammelist" :key="index" @click="jumpTo(item.pages)">
					<view style="display: flex;align-items: center;">
						<image style="width: 30rpx;height: 30rpx;" :src='item.src' mode=""></image>
						<view class="size m-l-20">
							{{item.name}}
						</view>
					</view>
					<view class="">
						<!-- <image style="width:  20rpx;height: 20rpx;" src="../../static/my/right.png" mode=""></image> -->
						<u-icon name="arrow-right" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view style=" padding: 0 30rpx; ">
			<view style="padding:  28rpx 26rpx;border-radius: 20rpx;box-shadow: 0rpx 0rpx 8rpx 8rpx #eee;">
				<view class="fr-b-c">
					<view class="">
						代理商权限
					</view>
				</view>
				<view class="fr-b-c m-t-20" style="padding: 20rpx;">
					<view class="fr-c-d ">
						<image style="width: 48rpx;height: 48rpx;" src='../../static/my/mysi.png' mode=""></image>
						<view class="s3 ">
							全国地图
						</view>
					</view>
					<view class="fr-c-d " @click="jumpTo('/my-company/company/company')">
						<image style="width: 48rpx;height: 48rpx;" src="../../static/my/mysi2.png" mode=""></image>
						<view class="s3 ">
							我的公司
						</view>
					</view>
					<view class="fr-c-d ">
						<image style="width:48rpx;height: 48rpx;" src="../../static/my/mysi3.png" mode=""></image>
						<view class="s3 ">
							会务核销
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: '200',
				nammelist: [{
						name: '我的钱包',
						pages: '/my-bus/wallet/wallet',
						src: '../../static/my/a1.png'
					},
					{
						name: '佣金钱包',
						pages: '/my-bus/commission/commission',
						src: '../../static/my/a1.png'
					},
					{
						name: '收货地址',
						src: '../../static/my/a2.png',
						pages: '/my-bus/address/address',
					},
					{
						name: '在线客服',
						src: '../../static/my/a3.png'
					},
					{
						name: '客服电话',
						src: '../../static/my/a4.png'
					},
					{
						name: '好友列表',
						src: '../../static/my/a5.png'
					},
					{
						name: '创辅老师',
						src: '../../static/my/a6.png'
					},
					{
						name: '服务中心',
						pages: '/my-bus/serviceCenter/serviceCenter',
						src: '../../static/my/a7.png'
					},
					{
						name: '我的合同',
						src: '../../static/my/a8.png'
					},

				]
			}
		},
		onLoad() {

		},
		methods: {
			//我的项目
			xianmu(){
				uni.navigateTo({
					url:'/my-bus/Project/Project'
				})
			},
			jumpTo(url) {
				uni.navigateTo({
					url
				})
			},
			news() {
				uni.navigateTo({
					url: '../../my-bus/news/news'
				})
			},
			means() {

				uni.navigateTo({
					url: '../../my-bus/my-means/my-means'
				})
			}
		}
	}
</script>

<style>
	r .size {
		font-size: 28px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 0px;
		color: rgba(51, 51, 51, 1);
	}

	.b1 {
		width: 330rpx;
		height: 200rpx;
		opacity: 1;
		border-radius: 10rpx;
		background: rgba(255, 131, 72, 1);
	}

	.b2 {
		width: 330rpx;
		height: 200rpx;
		opacity: 1;
		border-radius: 10rpx;
		background: rgba(255, 210, 79, 1);
	}

	.box {
		position: absolute;
		background-color: #fff;
		padding: 30rpx;
		height: 58rpx;
		width: 650rpx;
		border-radius: 14rpx;
		margin-top: 40rpx;
	}

	.box2 {
		height: 90rpx;
		opacity: 1;
		border-radius: 10px;
		background: linear-gradient(270deg, rgba(255, 101, 61, 1) 0%, rgba(255, 136, 0, 1) 100%);
	}

	.wrap {
		height: 140rpx;
		background: linear-gradient(90deg, rgba(255, 101, 61, 1) 0%, rgba(255, 130, 0, 1) 100%);
		text-align: center;
		line-height: 200rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #fff;
	}

	.s1 {
		font-size: 26rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 0rpx;
		color: rgba(255, 255, 255, 1);
	}

	.s2 {
		color: rgba(255, 255, 255, 1);
		font-size: 18rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 0rpx;
		color: rgba(255, 255, 255, 1);
		margin-right: 5rpx;
	}

	.s3 {
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 0px;
		color: rgba(73, 73, 73, 1);
		margin-top: 20rpx;
	}

	.s4 {
		font-size: 20rpx;
		font-weight: 700;
		letter-spacing: 0px;
		line-height: 0px;
		color: rgba(255, 165, 0, 1);
		border-radius: 38px;
		background: rgba(255, 255, 255, 1);
		padding: 20rpx;
	}

	.fr-c-d {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.w1 {
		display: flex;
		align-items: center;
		border-radius: 30rpx;
		background-color: rgba(0, 0, 0, 0.1);

		line-height: 30rpx;
		padding: 10rpx;
	}
</style>
